<template>
  <div id="pageinfo">
    <!-- 这里是页面内容区 -->
    <div class="content">
      <img class="vactivity-back" src="../../img/images_share_BHS.jpg" alt=""/>
      <!--<iframe frameborder="0" width="100%" height="200rem"-->
      <!--src="https://v.qq.com/iframe/player.html?vid=b05043jy2ev&tiny=0&auto=0" allowfullscreen></iframe>-->
      <!--<iframe width="100%" height="200rem" src="//player.bilibili.com/player.html?aid=20200194&cid=33375756&page=8" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->
      <!--<iframe width="100%" height="200rem" src='http://player.youku.com/embed/XMzE1MDk4NzgyOA=='  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>-->
      <div style="padding-bottom: 2em;">
        <div v-if="recommIsAgent"
             style="margin: 0.5em 1em;color: rgba(247,132,35,0.91);font-size: 0.9rem;text-align: center">
          销售电话：<a :href="'tel:' + this.recommPhoneNum " style="color:rgba(247,132,35,0.91); ">{{ this.recommPhoneNum
          }}</a>
        </div>

        <div class="weui-cells weui-cells_form">
          <div class="weui-cell">
            <div class="weui-cell__hd" ><label class="weui-label"><span style="color: red;">*</span>姓&nbsp;&nbsp;&nbsp;名</label>
            </div>
            <div class="weui-cell__bd">
              <input id="name" class="weui-input" type="text" v-model="name" placeholder="请输入姓名"/>
            </div>
          </div>
          <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd">
              <label class="weui-label"><span style="color: red;">*</span>手机号</label>
            </div>
            <div class="weui-cell__bd">
              <input id="phone" v-model="phone" class="weui-input" type="tel" placeholder="请输入手机号">
            </div>
            <div class="weui-cell__ft">
              <button id="getvcode" class="weui-vcode-btn" @click="getvcode()">{{ vcodemsg }}</button>
            </div>
          </div>
          <div class="weui-cell weui-cell_vcode"
               style="font-weight: 500;font-size: 0.7rem;color: rgba(247,132,35,0.91)">
            <input type="checkbox" v-model="isAgent" id="isAgent"> &nbsp;&nbsp;自动成为销售顾问，展示电话号码在宣传页中
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label"><span style="color: red;">*</span>验证码</label></div>
            <div class="weui-cell__bd">
              <input id="vcode" v-model="vcode" class="weui-input" type="number" pattern="[0-9]*"
                     placeholder="请输入验证码"/>
              <!--:value="checkCode" v-model="checkCode"-->
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">地&nbsp;&nbsp;&nbsp;址</label></div>
            <div class="weui-cell__bd">
              <input id="address" v-model="address" class="weui-input" type="text" placeholder="请输入地址"/>
            </div>
          </div>

          <p style="color:gray;font-size: 0.8em;margin: 0.5em 0.5em;">我们尊重你的隐私，承诺您的信息绝不向任何人泄漏</p>
          <div class="div_button">
            <mt-button class="mt-button " type="primary" @click="saveInfo()">领取设备</mt-button>
          </div>
        </div>
        <div style="text-align: center" class="">
          <div style="text-align: center;font-weight: 600;font-size: 0.7rem;color: rgba(255,86,18,0.8)">
            好友通过你的链接提交申请，安装设备<br>
            我们将发信息给你，保证你的超级权益<br>
            请识别下面的二维码关注我们，以便接收信息
          </div>
          <img width="111rem" src="../../img/baohx.jpg"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
  import {MessageBox,Button } from 'mint-ui'
  import wx from 'weixin-js-sdk'
  import 'weui/dist/style/weui.css'

  export default {
    name: 'pageinfo', //绑定标签
    data() { //初始化数据
      return {
        infomation: [],
        openid: '',
        recommCode: '',
        sharelink: "",
        sharetitle: "朕学车-史上最严驾考来袭，邀您免费领取考车级路考设备",
        sharedesc: "我已免费领取朕学车价值6999元路考仪，邀您参加本次活动。",
        shareicon: "http://www.zhenxc.com/publicity/img/logo100.png",
        name: '',  //申请人姓名
        vcodemsg: "获取验证码",
        time: 60,
        vcode: '',
        phone: '',             //
        address: '',           //地址
        newRecommCode: '',     //通过申请人生成分享码
        platformRecomCode: '1', //平台编码
        agentsRecomCode: '2',    //平台代理商编码
        isAgent: false,         //是否成为代理
        recommPhoneNum: '15683850251',       //分享者电话
        recommIsAgent: false     //分享者是否是代理
      }
    },
    created() {
      this.initinfo();
    },
    methods: {
      initinfo: function () {
        console.log("初始化基础数据")

        //判断是否是微信内打开
        if (this.util.isWinxin()) {
          //获取openid,有三种方式。
          var request = {
            QueryString: function (val) {
              var uri = window.location.search;
              console.log("获取连接参数：" + uri);
              var re = new RegExp("" + val + "=([^\&\?]*)", "ig");
              return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
            }
          };
          let myRecommCode = this.util.getRequestURL().QueryString('myRecommCode');

 //
          console.log("从连接中获取myRecommCode:----" + this.recommCode);
          //从链接中获取分享者openid
          this.recommCode = this.util.getRequestURL().QueryString('recommCode');

          console.log("从链接中获取recommCode:" + this.recommCode);
          //从链接中获取平台编号 platformRecomCode
          this.platformRecomCode = this.util.getRequestURL().QueryString('platformRecomCode');
          console.log("从链接中获取platformRecomCode:" + this.platformRecomCode);

          //从链接中获取代理商编号  agentsRecomCode
          this.agentsRecomCode = this.util.getRequestURL().QueryString('agentsRecomCode');
          console.log("从链接中获取agentsRecomCode:" + this.agentsRecomCode);

          //判断this.recommCode获取数据
          if (!this.recommCode || this.recommCode == undefined || this.recommCode == "undefined") {
            this.recommCode = "zhenxc";
            console.log("分享链接获取数据有误，请重新获取分享链接！", "提示信息")
          }
          //在请求链接上获取openID
          this.openid = request.QueryString("openid");
          console.log("从链接中获取openid:" + this.openid);

          //如果没有获取到，从本地缓存中获取。
          if (!this.openid) {
            this.openid = localStorage.getItem("openid");
            console.log("从缓存中获取openid:" + this.openid);
          }

          if (!this.openid) { //如果本地或者url无openid，则微信获取
            //在非微信中打开
            var href = "http://www.zhenxc.com/feeCoach/?/#/SharePageBHS";
            var url = encodeURIComponent("http://www.zhenxc.com/feesys/generalize/share?url=" + href);
            //直接调转到页面上。
            location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx13ce2540d20504d5&redirect_uri=" + url + "&response_type=code&scope=snsapi_base&state=recommCode=" + this.recommCode + "*platformRecomCode=" + this.platformRecomCode + "*agentsRecomCode=" + this.agentsRecomCode + "#wechat_redirect";
          } else {
            let params = {
              openid: this.openid,
              url: location.href//"http://www.zhenxc.com/feeCoach/?recommCode="+myRecommCode+"/#/SharePage"
            }
            this.$axios.post(this.umcons.serviceAddress.SHARE_USER_WCCONFIG, params).then( (response) => {
              var result = response.data.result;
              this.util.initwxconfig(result);
              //初始化分享的链接
              let linkValue = "http://www.zhenxc.com/feeCoach/?recommCode=" + this.newRecommCode + "&platformRecomCode=" + this.platformRecomCode + "&agentsRecomCode=" + this.agentsRecomCode + "#/SharePageBHS";// "http://www.zhenxc.com/feeCoach/?recommCode=" + myRecommCode + "#/SharePage";
              //初始化分享到空间、朋友圈、好友的自定义描述和链接。
              this.configShare(linkValue);
            });
          }

          //根据当前用户生成加密的openid
          if (!this.newRecommCode || this.newRecommCode == null || this.newRecommCode == "" || this.newRecommCode == undefined || this.newRecommCode == "undefined") {
            let params = {
              openid: this.openid,
              recommCode: this.recommCode
            }

            /**
             *  获取加密
             */
            this.$axios.post(this.umcons.serviceAddress.COACH_GET_REMCODE, params).then((response) => {
              this.newRecommCode = response.data.result.recommendCode;
              console.log(response.data.result.isAgent)
              //判断
              let  isAgent = response.data.result.isAgent;
              if (isAgent && isAgent != 0) {
                this.recommPhoneNum = response.data.result.phoneNum;
                this.recommIsAgent = true;
              } else {
                this.recommIsAgent = false;
              }
            });
          }
        } else {
          console.log("请在微信中打开");
        }
      }, changeConsultant: function () {  //设置顾问
        let params = {
          openid: this.openid
        }

        this.$axios.post(this.umcons.serviceAddress.COACH_APPLY_CONSULTANT, params).then(function (response) {
          console.log("恭喜你成为顾问", "提示");
          console.log(response.data.result);
        }.bind(this));
      }, getRecommendCode() {
        this.recommendCode = this.getURLString("recommendCode");
        console.log("recommendCode>>>" + this.recommendCode);
      }, getURLString(name) {
        var after = window.location.hash.split("?")[1];
        if (after) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = after.match(reg);
          if (r != null) {
            return decodeURIComponent(r[2]);
          } else {
            return "";
          }
        }
      }, configShare(mlink) {
        console.log("share link:" + mlink);
        //处理验证成功的信息_this.newDetailObj.title   window.location.href.split('#')[0] _this.newDetailObj.thu_image   _this.desc
        wx.ready(function () {
          //       alert(window.location.href.split('#')[0]);

          //分享到朋友圈
          wx.onMenuShareTimeline({
            title: "史上最强科目三路考系统仅需399元！特邀您一起来领取！", // 分享标题
            link: mlink,//this.sharelink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "http://www.zhenxc.com/publicity/img/logo100.png", // 分享图标
            success: function (res) {
              // 用户确认分享后执行的回调函数

            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
            }
          });
          //分享给朋友
          wx.onMenuShareAppMessage({
            title: "史上最强科目三路考系统仅需399元！特邀您一起来领取！", // 分享标题
            desc: "朕学车路考系统100%媲美考车！规则与考场同步！终身免费维修升级！", // 分享描述
            link: mlink,//this.sharelink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "http://www.zhenxc.com/publicity/img/logo100.png", // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function (res) {
              // 用户确认分享后执行的回调函数

            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数

            }
          });
          //分享到QQ
          wx.onMenuShareQQ({
            title: "史上最强科目三路考系统仅需399元！特邀您一起来领取！", // 分享标题
            desc: "朕学车路考系统100%媲美考车！规则与考场同步！终身免费维修升级！", // 分享描述
            link: mlink,//this.sharelink, // 分享链接
            imgUrl: "http://www.zhenxc.com/publicity/img/logo100.png", // 分享图标
            success: function (res) {
              // 用户确认分享后执行的回调函数

            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数

            }
          });

          //分享到QQ空间
          wx.onMenuShareQZone({
            title: "史上最强科目三路考系统仅需399元！特邀您一起来领取！", // 分享标题
            desc: "朕学车路考系统100%媲美考车！规则与考场同步！终身免费维修升级！", // 分享描述
            link: mlink,//this.sharelink, // 分享链接
            imgUrl: "http://www.zhenxc.com/publicity/img/logo100.png", // 分享图标
            success: function (res) {
              // 用户确认分享后执行的回调函数

            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数

            }
          });
        });
      }, getvcode: function () { //获取验证码方法
        //console.log("时间" + this.time);
        //判断时间
        if (this.time < 60 && this.time > 0) {
          MessageBox.alert("手机验证码已发送，请在" + this.time + "秒后再重新获取新的验证码!", "提示");
          return;
        }

        //判断时间和电话号码的位数是否合法
        if (this.time == 60 && this.phone.length == 11) {
          //构建参数属性
          let params = {
            openid: this.openid,
            phoneNum: this.phone
          }
          //请求获取验证码
          this.$axios.post(this.umcons.serviceAddress.GET_CHECKCODE, params).then((response) => {
            //提示短信是否已经发送到手机上
            MessageBox.alert(response.data.resultDesc, "提示");
            // console.log("发送短信返还数据:" + response.data.resultDesc);
            if (response.data.resultCode == 1) {
              //发送手机验证码成功
              //调用定时器(1000毫秒调用一次)
              this.timer = setInterval(() => {
                //定时器每次调用减一
                this.time--;
                //重新填充获取按钮的显示值
                this.vcodemsg = "重新发送(" + this.time + ")";
                //当倒计时等于0的时候，数据重置
                if (this.time <= 0) {
                  //停止定时器调用（定时器对象）
                  clearInterval(this.timer);
                  //开启倒计时 60
                  this.time = 60;
                  this.vcodemsg = "获取验证码";
                }
              }, 1000);
            } else {
              //发送手机验证码失败
              MessageBox.alert("获取验证码失败，请点击获取重新获取!", "提示");
            }
          });
        } else {
          MessageBox.alert("请输入正确的手机号码", "提示");
        }
      }, saveInfo: function () {  //保存申请的信息

        //初始化参数
        let params = {
          phoneNum: this.phone,
          checkCode: this.vcode,
          applyName: this.name,
          coachRecomCode: this.recommCode,
          address: this.address,
          openid: this.openid,
          saleRecomCode: this.openid,
          agentsRecomCode: this.agentsRecomCode,
          platformRecomCode: this.platformRecomCode,
          isAgent: this.isAgent == 1 ? 1 : 0
        }
        console.log(params)
        //验证数据的有效性
        if (!this.name) {
          //验证用户名
          MessageBox.alert("请输入用户名!", "提示");
        } else if (!this.phone || this.phone.length != 11) {
          //验证电话号码
          MessageBox.alert("请输入合法的电话号码!", "提示");
        } else if (!this.vcode) {
          //验证码
          MessageBox.alert("请输入验证码!", "提示")
        } else if (!this.recommCode || this.recommCode == "undefined") {
          MessageBox.alert("分享链接不完整，请分享人重新分享链接，谢谢！")
        } else {
          //提交分页页面的设备申请数据
          this.$axios.post(this.umcons.serviceAddress.APPLYDEVICE, params).then((response) => {
            //验证码错误的情况
            if (response.data.resultCode == "1") {
              //成功
              MessageBox('提示', response.data.result);
              //清理填写的数据
              this.name = '';
              this.phone = '';
              this.vcode = '';
              this.address = '';
              this.agentsRecomCode = '';
              this.platformRecomCode = '';
              this.isAgent = false;
              this.time = 0;
              this.vcodemsg = "获取验证码";
            } else {
              MessageBox('提示', response.data.resultDesc);
            }
          });
        }
      }
    }
  }
</script>

<style scoped="scoped">
  @import url("../../css/Cactivity.css");
  @import url("../../css/base.css");
  /*@import url("../../css/weui.css");*/

  .weui-btn_primary {
    background-color: #fec200;
  }

  .div_button {
    text-align: center;
    margin: 0.8rem 0rem;
  }

  .mt-button {
    margin-top: 0.5rem;
    background-color: #FFD161;
    border-color: #FFD161;
    box-shadow: 0 0 1rem #FFD161;
    width: 16rem;
  }

</style>
